<template>
    <div class="containerr">
        <div class="myVideo">
            <div>{{ movieName }}</div>
            <video v-if="movieSrc" controls>
                <source :src="movieSrc">
            </video>
        </div>
    </div>

</template>
<script setup lang='ts'>
import {ref, reactive, onMounted} from 'vue'
import { weeklyCinema, type WeeklyCinema } from '@/api/entertainment/entertainment';
import type { ApiResponse } from '@/api/common';
const movieSrc = ref('')
const movieName = ref('')

const init =()=>{
    weeklyCinema().then((res:ApiResponse<WeeklyCinema>)=>{
        if (res.data) {
            movieSrc.value = res.data.videoUrl;
            movieName.value = res.data.videoName;
        }
    })
}
init();


// 这种流的加载方式，像是全部内容下载下来，再播放，速度不能接受的。
// const init =()=>{
//     fetch('http://192.168.1.4:9080/zray/%E6%88%91%E7%9A%84%E7%BE%8E%E5%A5%B3%E8%80%81%E6%9D%BF.mkv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=zray%2F20240917%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240917T015148Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=66c19c59d112849adf35da86f88bddfc981113f72755f49904033eef7d4e8950')
//     .then((response: Response) => response.blob())
//     .then((blob: Blob) => {
//         console.log(1111);
        
//         // 创建 URL 对象
//         const videoUrl: string = URL.createObjectURL(blob);
//         // 将 URL 对象赋值给 video 标签的 src 属性
//         const myVideo: HTMLVideoElement | null = document.getElementById('myVideo') as HTMLVideoElement | null;
//         if (myVideo) {
//             myVideo.src = videoUrl;
//         }
//     })
//     .catch((error: Error) => {
//         console.error('An error occurred:', error);
//     });
// }
// init();
</script>
<style scoped>
.containerr {
    justify-items: center;
    align-items: center;
}
.myVideo {
    margin-top: 5%;
    margin-left: 5%;
}
</style>